<template>
	<div class="early-warning es-each-line">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
	        	<div class="widget-body am-fr">
					<div class="am-u-md-12 one-line">
						<el-select @change="handleChangeArea" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3" v-model="query.areaTeamId" placeholder="请选择区域">
	                        <el-option
	                            v-for="item in areaTeams"
	                            :key="item.areaTeamId"
	                            :label="item.name"
	                            :value="item.areaTeamId">
	                        </el-option>
	                    </el-select>

	                    <el-select size="small" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
					               :disabled="busTeams.length === 0" v-model="query.busTeamId" placeholder="请选择业务组">
					    	<el-option
						        v-for="item in busTeams"
						        :key="item.busTeamId"
						        :label="item.name"
						        :value="item.busTeamId">
					    	</el-option>
					    </el-select>
						<el-select :disabled="periods.length === 0" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
	                        v-model="query.periodId" placeholder="请选择期数">
	                        <el-option
	                            v-for="item in periods"
	                            :key="item.periodId"
	                            :label="item.periodName"
	                            :value="item.periodId">
	                        </el-option>
	                    </el-select>
	                    <el-select clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                           v-model="query.gradeId" placeholder="请选择年级">
		                	<el-option label="请选择年级" value="">
		               		</el-option>
		                	<el-option
			                    v-for="item in grades"
			                    :key="item.gradeId"
			                    :label="item.gradeName"
			                    :value="item.gradeId">
		                	</el-option>
		                </el-select>
                    </div>
                    <div class="am-u-md-12 one-line">
                    	<el-select size="small" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
			                       v-model="query.subjectId" placeholder="请选择科目">
			            	<el-option
				                v-for="item in subjects"
				                :key="item.value"
				                :label="item.label"
				                :value="item.value">
			            	</el-option>
			            </el-select>
	                    <el-select size="small" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
	                        v-model="query.segmentNo" placeholder="段次">
	                        <el-option
						        v-for="item in segmentNos"
						        :key="item.value"
						        :label="item.name"
						        :value="item.value">
					    	</el-option>
	                    </el-select>
	                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.teacherName" placeholder="任课老师姓名"/>
				            </div>
				        </div>
				        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.classNo" placeholder="班级编号"/>
				            </div>
				        </div>
			        </div>
			        <div class="am-u-md-12 one-line">
			        	<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.className" placeholder="班级名称"/>
				            </div>
				        </div>
				        <el-date-picker class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                	v-model="classDate"
		                	type="daterange"
		                	placeholder="上课日期">
		                </el-date-picker>
				        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
					    	<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
					    	</button>
					    	<button @click="handleExport" type="button" class="btn-search am-btn am-btn-default am-btn-success">
						        <span class="am-icon-search"></span>导出
						    </button>
					    </div>
					</div>

				    <div class="am-u-sm-12">
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              :empty-text="tableNoDataTips"
			              style="min-width: 100%">
			              <el-table-column
			                prop="periodName"
			                label="期数"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="班级编号"
			                prop="classNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="班级名称"
			                prop="className"
			                width="150">
			              </el-table-column>
			              <el-table-column
			                label="年级"
			                prop="gradeName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="科目"
			                prop="subjectName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="业务组"
			                prop="busTeamName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="讲次"
			                prop="lectureNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="上课日期"
			                prop="classDate"
			                min-width="100">
			                <template scope="scope">
			                  {{ scope.row.classDate | formatDate }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="上课时间"
			                min-width="100">
							<template scope="scope">
			                  {{scope.row.startTime + '-' + scope.row.endTime }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="总人数"
			                prop="totalPersonNum"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="任课老师"
			                prop="teacherName"
			                min-width="100">
			              </el-table-column>
			            </el-table>
			        </div>

			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" />
			            </div>
			        </div>
	        	</div>
	        </div>
	    </div>
	</div>
</template>
<script>
	import io from '../../lib/io'
	import moment from 'moment'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return {
				tableNoDataTips: '暂无数据',
				tableData: [],
				segmentNos: [
					{
						value: '1',
						name: '段次1'
					},
					{
						value: '2',
						name: '段次2'
					},
					{
						value: '3',
						name: '段次3'
					},
					{
						value: '4',
						name: '段次4'
					},
					{
						value: '5',
						name: '段次5'
					},
					{
						value: '6',
						name: '段次6'
					},
					{
						value: '7',
						name: '段次7'
					},
					{
						value: '8',
						name: '段次8'
					}
				],
				classDate: '',
				query:{
					areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
					busTeamId: '',
					periodId: '',
					gradeId: '',
					subjectId: '',
					segmentNo: '',
					teacherName: '',
					classNo: '',
					className: '',
					startDate: '',
					endDate: '',
					pageNo: 1,
					pageSize: 10,
				},
				total: 0,
				periods: [],
			}
		},
		components: {
	    	Pagination
	    },
	    watch:{
			classDate(newVal) {
		        this.query.startDate = newVal[0] ? this.$options.filters.formatDate(newVal[0]) : ''
		        this.query.endDate = newVal[1] ? this.$options.filters.formatDate(newVal[1]): ''
		    }
		},
		methods:{
			handleChangeArea(){
				this.loadPeriodData();
			},
			loadPeriodData(resolve) {
		        io.post(io.apiAdminPeriodListForAreaTeam, {
		          areaTeamId : this.query.areaTeamId
		        }, (ret) => {
					if (ret.success) {
						this.periods = ret.data;
						this.query.periodId = ret.data.filter(item => item.isCurrent == 1 )[0] ? ret.data.filter(item => item.isCurrent == 1 )[0].periodId : '';

					} else {
						this.$alert(ret.desc)
					}

					if(resolve){
                        resolve('success');
                    }
		        })
	      	},
	      	search(){
	      		this.query.pageNo = 1;
	      		this.handleSearch();
	      	},
	      	handleSearch(pageNo){
	      		let formData = this.getFormDate(pageNo);
	      		if(formData.periodId != ''){
	      			io.post(io.findAttendWarningPage, formData , (ret) => {
			        	if(ret.success){
			        		this.tableData = ret.data.list;
			        		this.total = ret.data.total;
			        	}else {
			        		this.$alert(ret.desc)
			        	}
			        })
	      		}else{
	      			this.$alert('期数不能为空！')
	      		}
	      	},
	      	getFormDate(pageNo){
	      		this.query.pageNo = pageNo || this.query.pageNo || 1
	      		let formData = {};
	      		for(var key in this.query){
	      			if(Array.isArray(this.query[key])){
	      				formData[key] = this.query[key].join(",");
	      			}else if(typeof this.query[key] === "boolean"){
	      				if(this.query[key]){
	      					formData[key] = 1
	      				}
	      			}else {
	      				if((this.query[key] + '').trim() !== ''){
		      				formData[key] = this.query[key];
		      			}
	      			}
	      		}
	      		return formData;
	      	},
	      	handleExport(){
	      		let formData = this.getFormDate();
	      		io.downloadFile(io.exportAttendWarning, formData);
	      	},
		},
		computed: {
			areaTeams() {
                return this.$root.config.areaTeams || []
            },
            busTeams() {
            	let busTeams = ( ( this.query.areaTeamId  ) ? ( this.$root.config.groupBusTeams[this.query.areaTeamId] || [] ) : [] )
      /*      	if(busTeams.length){
            		this.query.busTeamId = busTeams[0].busTeamId
            	}*/
		        return busTeams
		    },
		    grades: function () {
		        return this.$root.config.grades || []
		    },
		    subjects () {
		        return [{value: '', label: '全部科目'}].concat(
		        	this.$root.config.subjects.map(function(item){
		            	return {value: item.subjectId, label: item.subjectName}
		        	})
		        )
		    }
		},
		created(){
	    	let promise = new Promise((resolve, reject) => {
                this.loadPeriodData(resolve)
            });
	    	promise.then((value) => {
				// success
				this.handleSearch();
			}, (error) => {
				// failure
			});

	    },
	}
</script>
<style lang="less">

</style>
